<template>
  <div class="mapbox clear">
    <div class="left-con fl tx-c">
      <div class="card" style="background:#26ca91;">
        <p class="fz30 mt20 mb10">
          19
          <em>次</em>
        </p>
        <p>今日已处理</p>
      </div>
      <div class="card" style="background:#fd7262;">
        <p class="fz30 mt20 mb10">
          19
          <em>次</em>
        </p>
        <p>今日未处理处理</p>
      </div>
      <div class="pie mt20 bgff" id="pie">45454</div>
      <div class="pie mt20 bgff" id="pie1">45454</div>
    </div>
    <div class="right-con fr bgff">
      <div class="pie mt20 bgff" id="pie1">
        <div>区域报警地图</div>
        <div style="margin: 30px 0">
          <span style>
            设备总数：
            <span style="color: blue">111</span>
          </span>
          <span style="margin-left: 40px;">
            报警总数：
            <span style="color: red">0</span>
          </span>
          <span style="margin-left: 40px;">
            更新时间：
            <span>2019-7-22 15:30:00</span>
          </span>
        </div>
      </div>
      <baidu-map
        class="map"
        :map-types="['BMAP_HYBRID_MAP','BMAP_NORMAL_MAP']"
        :center="center"
        :zoom="zoom"
        @ready="handler"
      >
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-marker
          :position="{lng: 104.084, lat: 30.703}"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        >
          <!--<bm-label content="成都市火车北站" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>-->
        </bm-marker>
      </baidu-map>
    </div>
  </div>
</template>

<script>
export default {
  name: "mapstyle",
  data() {
    return {
      center: { lng: 0, lat: 0 }, //经纬度
      zoom: 3, //地图展示级别
      points: []
    };
  },
  mounted() {
    this.drawPie("pie");
    this.drawPie("pie1");
  },
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      this.center.lng = 104.084;
      this.center.lat = 30.703;
      this.zoom = 15;
    },
    drawPie(dom) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(dom));
      let option = {
        title: {
          text: "月用电统计",
          subtext: "虚构数据",
          left: "left"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: "center",
          data: ["正常", "报警", "离线"]
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              { value: 255, name: "正常" },
              { value: 535, name: "报警" },
              { value: 510, name: "离线" }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal: {
                color: function(params) {
                  //自定义颜色
                  var colorList = [
                    "#26ca91",
                    "#fd7262",
                    "#999999",
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option);
    },
    clickHandler(e) {
      alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
    },
    addPoints() {
      const points = [];
      for (var i = 0; i < 1000; i++) {
        const position = {
          lng: Math.random() * 40 + 85,
          lat: Math.random() * 30 + 21
        };
        points.push(position);
      }
      this.points = points;
    }
  }
};
</script>

<style lang="scss">
.mapbox {
  height: 100%;
  .left-con {
    width: 380px;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;
    // height: 400px;
    .card {
      width: 48%;
      height: 120px;
      background: red;
      display: inline-block;
      vertical-align: middle;
      color: #fff;
    }
    .pie {
      height: 300px;
    }
  }
  .right-con {
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    width: calc(100% - 400px);
    .map {
      height: 600px;
    }
  }
  .anchorBL {
    display: none;
  }
}
</style>
